$(function(){

	'use strict';
	
	//自定义alert	
	var alertstr = "\
	  <div class='modal fade bs-example-modal-sm' id='alert_modal' tabindex='-1' role='dialog' >\
	    <div class='modal-dialog modal-sm' role='document'>\
	      <div class='modal-content'>\
	        <div class='modal-header'>\
	          <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>\
	          <h4 class='modal-title' id='alert_modal_title'>提示</h4>\
	        </div>\
	        <div class='modal-body' id='alert_modal_id'>\
	        </div>\
	        <div class='modal-footer'>\
	          <button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>\
	        </div>\
	      </div>\
	    </div>\
	  </div>\
	  ";
	$("body").append(alertstr);	
	
//左侧菜单定义
	var str = "\
	      <div class='probootstrap-site-logo probootstrap-animate' data-animate-effect='fadeInLeft'>\
	        <a href='index.html' class='mb-2 d-block probootstrap-logo'>时间:xxx</a>\
	        <p class='mb-0'>星星勋章,可以燎原 </p>\
	      </div>\
	      <div class='probootstrap-overflow'>\
	        <nav class='probootstrap-nav'>\
	          <ul>\
	            <li name='index' class='probootstrap-animate ' data-animate-effect='fadeInLeft'><a href='index.html'>Home</a></li>\
	            <li name='about' class='probootstrap-animate' data-animate-effect='fadeInLeft'><a href='about.html'>About</a></li>\
	            <li name='task_manage' class='probootstrap-animate' data-animate-effect='fadeInLeft'><a href='task_manage.html'>任务管理</a></li>\
	          </ul>\
	        </nav>\
	        <footer class='probootstrap-aside-footer probootstrap-animate' data-animate-effect='fadeInLeft'>\
	          <ul class='list-unstyled d-flex probootstrap-aside-social'>\
	            <li><a href='#' class='p-2'><span class='icon-twitter'></span></a></li>\
	            <li><a href='#' class='p-2'><span class='icon-instagram'></span></a></li>\
	            <li><a href='#' class='p-2'><span class='icon-dribbble'></span></a></li>\
	          </ul>\
	        </footer>\
	      </div>";
	if(!$("#aside_id").attr("name")){
		return;
	}
	$("#aside_id").html(str);
	var activename = $("#aside_id").attr("name");
	$("#aside_id li[name='"+activename+"']").addClass('active');

	var carousel  = function() {
		$('.owl-carousel').owlCarousel({
			loop: true,
			margin: 10,
			nav: true,
			stagePadding: 5,
			navText: ['<span class="icon-chevron-left">', '<span class="icon-chevron-right">'],
			responsive:{
				0:{
					items: 1
				},
				600:{
					items: 2
				},
				1000:{
					items: 3
				}
			}
		});
	}
	carousel();

	var toggleMenu = function() {
		var aside = $('.js-probootstrap-aside'),
			main = $('.js-probootstrap-main');
		$('.js-probootstrap-toggle').on('click', function(e) {
			aside.addClass('active');
			main.addClass('mobile-open');
			e.preventDefault();
		});
		$('.js-probootstrap-close-menu').on('click', function(e) {
			aside.removeClass('active');
			main.removeClass('mobile-open');
			e.preventDefault();
		});

		$(document).mouseup(function(e) {
			var container = $(".probootstrap-aside");
	    if (!container.is(e.target) && container.has(e.target).length === 0) {
	      aside.removeClass('active');
	      main.removeClass('mobile-open');
	    }
    });
    
	};
	toggleMenu();

	var contentWayPoint = function() {
		var i = 0;
		jQuery('.probootstrap-animate').waypoint( function( direction ) {

			if( direction === 'down' && !jQuery(this.element).hasClass('probootstrap-animated') ) {
				
				i++;

				jQuery(this.element).addClass('item-animate');
				setTimeout(function(){

					jQuery('body .probootstrap-animate.item-animate').each(function(k){
						var el = jQuery(this);
						setTimeout( function () {
							var effect = el.data('animate-effect');
							if ( effect === 'fadeIn') {
								el.addClass('fadeIn probootstrap-animated');
							} else if ( effect === 'fadeInLeft') {
								el.addClass('fadeInLeft probootstrap-animated');
							} else if ( effect === 'fadeInRight') {
								el.addClass('fadeInRight probootstrap-animated');
							} else {
								el.addClass('fadeInUp probootstrap-animated');
							}
							el.removeClass('item-animate');
						},  k * 50, 'easeInOutExpo' );
					});
					
				}, 100);
				
			}

		} , { offset: '95%' } );
	};
	contentWayPoint();

	if ($('.probootstrap-main').length > 0 ) {
		$('.probootstrap-main').imagesLoaded( {
		  
		  },
		  function() {
		  	if ($('.card').length > 0 ) {
		    	$('.card').addClass('img-loaded');
		    }
		  }
		);
	}

});


/**
 * @param url 请求地址
 * @param param 查询参数
 * @param callback 查询后回调函数
 * @param $footDiv 分页页脚div
 * @param flag 是否下载（待开发）
 * @returns
 */
function main_page(url,param,callback,$footDiv,flag){
	$.ajax({url:url,data:param,dataType:"json",async:false
	,success:function(data){
		var pageSize = data.pageSize;
		var pageNo = data.pageNo;
		var pageCount = data.pageCount;
		var totalCount = data.totalCount?data.totalCount:0;
		//1、生成footer
		var $pageNav = $("<nav aria-label='Page navigation'></nav>");
		var $pageNav_ul = $("<ul class='pagination' style='cursor:pointer;'></ul>");
		$footDiv.empty();
		$pageNav.append($pageNav_ul)
		$footDiv.append($pageNav);
		$pageNav_ul.append($("<li><span>总记录数："+totalCount+"条,当页展示10条,</span></li>"));
		if(pageCount <= 0){
			$pageNav_ul.append($("<li class='disabled'><a aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>"));
			$pageNav_ul.append($("<li class='disabled'><a aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>"));
		}else{
			//上一页
			var $preBtn = $("<li><a aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>");
			$pageNav_ul.append($preBtn);
			var noShowBegin = Math.floor(pageNo/10)*10+1;
			var noShowEnd = noShowBegin+9;
			for(var i=noShowBegin;i<=pageCount && i < noShowEnd;i++){
				if(i == pageNo){
					$pageNav_ul.append($("<li class='active'><a>"+i+"</a></li>"));
				}else{
					var pageNumBtn = $("<li><a>"+i+"</a></li>");
					$pageNav_ul.append(pageNumBtn);
					pageNumBtn.bind("click",i,function(e){
						var linumParam = $.extend({},param);
						linumParam.pageNo = e.data;
						main_page(url,linumParam,callback,$footDiv);
					});
				}
			}
			//下一页
			$nextBtn = $("<li><a aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");
			$pageNav_ul.append($nextBtn);
			if(noShowBegin == pageNo){
				$preBtn.addClass("disabled");
			}
			if(noShowEnd == pageNo || pageCount == pageNo){
				$nextBtn.addClass("disabled");
			}
			$preBtn.click(function(){
				var prePageParam = $.extend({},param);
				prePageParam.pageNo = pageNo-1;
				main_page(url,prePageParam,callback,$footDiv);
			});
			$nextBtn.click(function(){
				var nextPageParam = $.extend({},param);
				nextPageParam.pageNo = pageNo+1;
				main_page(url,nextPageParam,callback,$footDiv);
			});
		}
		//2、遍历数据对象并回调
		var result = data.result;
		param.pageNo = data.pageNo;
		callback(result);
	},error:function(){
		malert("访问后台失败，请检查","查询失败！");
	}});
};

/**
 * 自定义弹出框消息
 * @param msg
 * @param title
 * @returns
 */
function malert(msg,title){
	$("#alert_modal_title").text("提示");
	$("#alert_modal_id").text("");
	if(title){
		$("#alert_modal_title").text(title);
	}
	if(msg){
		$("#alert_modal_id").html(msg);
	}
	$("#alert_modal").modal("show");
}	

